<template>
  <el-dialog v-model="dialogModel" width="90%">
    <div class="q-cxt">
      <div class="q-c"></div>
      <div class="q-list">
        <div class="q-item" v-for="(item, i) in examDetail.examQuestionList">
          <el-text class="q-title">{{ i + 1 }}、<span v-html="decodeURIComponent(item.title)"></span></el-text>
          <div class="q-content">
            <el-checkbox-group v-if="item.type == questionType.多选" v-model="item.userAnswerVO.userAnswer">
              <el-checkbox disabled v-for="(label, value) in item.content" :label="value"><span v-html="label"></span>
              </el-checkbox>
            </el-checkbox-group>
            <el-radio-group v-else-if="item.type == questionType.单选 || item.type == questionType.判断"
              v-model="item.userAnswerVO.userAnswer">
              <el-radio disabled v-for="(label, value) in item.content"
                :label="item.type == questionType.判断 ? label : value"><span v-html="label"></span></el-radio>
            </el-radio-group>
            <span v-else v-html="item.userAnswerVO.userAnswer"></span>
            <div class="q-flex">
              <el-text>标答</el-text>
              <span v-html="item.answer"></span>
            </div>
            <div class="q-flex" v-if="item.type != questionType.简答">
              <el-text>结果</el-text>
              <el-tag v-if="item.userAnswerVO.userScore > 0" type="success">正确</el-tag>
              <el-tag v-else type="danger">错误</el-tag>
            </div>
            <div class="q-flex">
              <el-text>得分</el-text>
              <span>{{ item.userAnswerVO.userScore }}</span>
            </div>
            <div class="q-flex">
              <el-text>难度</el-text>
              <span>{{ item.levelName }}</span>
            </div>
            <div class="q-flex" style="align-items: flex-start">
              <el-text>解析</el-text>
              <span v-html="decodeURIComponent(item.analysis)"></span>
            </div>
            <div class="q-flex">
              <el-text type="warning">修改</el-text>
              <el-input-number :min="0" :max="5" v-model="item.newScore" :step="0.5" />
              <el-button v-if="item.newScore != item.userAnswerVO.userScore" @click="updateScore(item)">提交评分
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="q-option">
        <h4>{{ examDetail.name }}</h4>
        <el-text>用户名：{{ userInfo.account }}</el-text>
        <el-text>真是姓名：{{ userInfo.realName }}</el-text>
        <el-text>工号：{{ userInfo.code }}</el-text>
        <!-- <el-text>身份证号：{{}}</el-text> -->
        <!-- <el-text>职位：{{}}</el-text> -->
        <el-text>得分：{{ userInfo.total_userScore }}</el-text>
        <el-text>耗时：{{userInfo.takeTime}}</el-text>
        <div style="display: flex;flex-direction: column;align-items: center;margin-top: 10px">
          <el-button style="width: 150px" type="primary" @click="submit()" :loading="submitLoad">提交批改</el-button>
          <el-button @click="nextExam" v-if="nextExamId" style="width: 150px;margin-left: 0;margin-top: 10px"
            type="primary">下一张
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { updateExamScore, submitExam } from '@/api/position/positionAssessResult';
import { ElNotification } from 'element-plus';
import { getUser } from '@/api/system/user'

const props = defineProps({
  detail: {},
  nextExamId: ''
});
const emits = defineEmits(['readExam']);
const dialogModel = ref(false);
const examDetail = ref({});
const questionType = reactive({
  '判断': '11',
  '单选': '21',
  '多选': '22',
  '简答': '32'
});

const userInfo = ref({});
watch(() => props.detail.id, () => {
  if (!props.detail?.id) {
    return
  }
  let total_userScore = 0;
  examDetail.value = JSON.parse(JSON.stringify(props.detail))
  //整理数据
  examDetail.value.examQuestionList.forEach(item => {
    total_userScore += item.userAnswerVO.userScore||0;
    item.newScore = item.userAnswerVO.userScore;
    if (item.type !== questionType.简答) {
      try {
        //格式化问题内容
        item.content = JSON.parse(decodeURIComponent(item.content));
        //格式化正确答案
        let answer = decodeURIComponent(item.answer);
        if (item.type == questionType.多选) {
          answer = answer.split(',');
        }
        item.answer = answer;
        //多选题需要格式化用户填写的答案
        if (item.type == questionType.多选 && item.userAnswerVO && item.userAnswerVO.userAnswer) {
          item.userAnswerVO.userAnswer = item.userAnswerVO.userAnswer.split(',');
        }
      } catch (e) {
        console.error('数据格式错误');
      }
    }
  });
  getUserInfo(examDetail.value.userId);
  userInfo.value.total_userScore = total_userScore;
  userInfo.value.takeTime = examDetail.value.takeTime;
}, {
  immediate: true
});
defineExpose({
  open() {
    dialogModel.value = true;
  }
});
/**
 * 修改得分
 * @param item
 */
const updateScore = (item) => {
  userInfo.value.total_userScore = userInfo.value.total_userScore - item.userAnswerVO.userScore||0 + item.newScore;
  updateExamScore(item.userAnswerVO.id, item.newScore).then(() => {
    item.userAnswerVO.userScore = item.newScore;
  });
};
const submitLoad = ref(false);
const submit = () => {
  submitLoad.value = true;
  submitExam(examDetail.value.id).then(() => {
    ElNotification.success('提交成功');
  }).finally(() => {
    submitLoad.value = false;
  });
};
const nextExam = () => {
  emits('readExam', props.nextExamId);
};

async function getUserInfo(id) {
  let res = await getUser(id);
  let userInfoRes = res.data.data
  userInfo.value.realName = userInfoRes.realName
  userInfo.value.account = userInfoRes.account
  userInfo.value.code = userInfoRes.code
  console.log('userInfo', res.data.data);

}
</script>
<style>
.q-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;

  img {
    max-width: 30px;
    max-height: 30px;
  }

  p {
    padding: 0;
    margin: 0;
  }
}

.q-content {
  padding-left: 30px;
}
</style>
<style scoped>
.q-cxt {
  display: flex;
}

.q-c {
  width: 200px;
}

p {
  padding: 0;
  margin: 0;
}

.q-title {
  display: flex;
  align-items: flex-start;
  word-wrap: break-word;
  word-break: break-all;
}

:deep(.el-checkbox-group),
:deep(.el-radio-group) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.q-flex {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.q-option {
  width: 200px;
  display: flex;
  flex-direction: column;

  .el-text {
    width: 100%;
  }
}
</style>